<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="/js/jquery-3.4.1.min.js"></script>
</head>
<body>
  <main>
    <div>
     
    </div>
  </main>
  <script>

    var href = location.href;
    // console.log(href);
    // console.log(href.indexOf("="));
    var i = href.substring(href.indexOf("=") + 1);


    $.get("/php/xiangqing.php",{id:i},function(res){
    
      var data = JSON.parse(res);
        console.log(data);

        var str = `
        <h1>${data.title}</h1>
        <div>
          <span>${data.author}</span>
          <span>${data.podcast}</span>
          <span>${data.duration}</span>
          <span>${data.play_time}</span>
        </div>
        <img src="${data.img_url}" alt="">
        <div>
          ${data.content}
        </div>
        `;
        $("main > div").html(str);
    })
  
  </script>
</body>
</html>